/*
  学习目标：JSX-注意事项
  1. 必须有根标签
  2. 标签必须有关闭标记
  3. 关键字冲突
    3.1 class => className
    3.2 for => htmlFor
*/

import React from 'react';
import ReactDOM from 'react-dom';

const ulNode2 = (
  // 1. 必须有根标签 👍使用<></>包住jsx  认识<React.Fragement></React.Fragement>
  <>
    <ul className="list">
      <li>香蕉</li>
      <li>苹果</li>
      <li>橘子</li>
      <h1>1231</h1>
    </ul>
    <ul className="list">
      <li>香蕉</li>
      <li>苹果</li>
      <li>橘子</li>
      <h1>1231</h1>
    </ul>
    {/* 2. 标签必须有闭合标记 */}
    <input type="text" id="box" />
    <label htmlFor="box">点我等同于点了input</label>
  </>
);

ReactDOM.render(ulNode2, document.getElementById('root'));
